<template>
  <div class="table-container box-border px-40px">
    <div class="table-header">
      <div v-for="column in tableColumns" :key="column.dataIndex" class="header-cell">
        {{ column.title }}
      </div>
    </div>
    <div class="table-body">
      <div v-for="(item, index) in dataList" :key="index" class="table-row">
        <div v-for="column in tableColumns" :key="column.dataIndex" class="body-cell">
          <span v-if="column.dataIndex === 'index'">{{ index+1 }}</span>
          <span v-if="column.dataIndex === 'subjectName'">{{ item[column.dataIndex] }}</span>
          <span v-if="column.dataIndex === 'medal'" flex justify-center items-center>
            <img src="@/assets/images/xz_icon.png" w-50px h-50px mr-6px />
            {{ item[column.dataIndex] }}
          </span>
          <span v-if="column.dataIndex === 'trophy'" flex justify-center items-center>
            <img src="@/assets/images/jb_icon.png" w-50px h-50px mr-6px />
            {{ item[column.dataIndex] }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { medalList } from '@/api/index'
import { useConfigStore } from '@/store/modules/config'
const configStore = useConfigStore()

const curTopic = configStore.topics

const props = defineProps({
  no: String
})

const tableColumns = ref([
  {
    title: '序号',
    dataIndex: 'index'
  },
  {
    title: '主题',
    dataIndex: 'subjectName'
  },
  {
    title: '勋章',
    dataIndex: 'medal'
  },
  {
    title: '奖杯',
    dataIndex: 'trophy'
  }
])
const dataList = ref([])

function getData() {
  medalList({
    queryData: props.no,
      subjectId: curTopic.subjectId,
  }).then((res) => {
   dataList.value = res.data 
  })
}

onMounted(() => {
  getData()
})
</script>

<style scoped>
.table-container {
  width: 100%;
  font-size: 32px;
}

.table-header {
  display: flex;
  background-color: #f5f5f5;
  padding: 20px 0;
  border-radius: 10px 10px 0 0;
}

.header-cell {
  text-align: center;
  font-weight: bold;
}

.table-body {
  border: 1px solid #eee;
  border-top: none;
}

.table-row {
  display: flex;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.table-row:last-child {
  border-bottom: none;
}

.body-cell {
  flex: 1;
  text-align: center;
}
/* 序号列特殊宽度 */
.header-cell:first-child,
.body-cell:first-child {
  flex: 0 0 90px; /* 固定宽度80px */
}

/* 其他列保持自动分配宽度 */
.header-cell:not(:first-child),
.body-cell:not(:first-child) {
  flex: 1;
}
</style>
